import React from 'react';
import { Form, Input, Select, Modal } from 'antd';

const UserModal = ({ 
  modalVisible, 
  editingUser, 
  form, 
  roles, 
  handleModalOk, 
  handleModalCancel 
}) => {
  return (
    <Modal
      title={editingUser ? '编辑用户' : '添加用户'}
      open={modalVisible}
      onOk={handleModalOk}
      onCancel={handleModalCancel}
      destroyOnClose={true}
      afterClose={() => form.resetFields()}
      forceRender
    >
      <Form
        form={form}
        layout="vertical"
        preserve={false}
      >
        <Form.Item
          name="username"
          label="用户名"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input disabled={!!editingUser} autoComplete="off" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input.Password autoComplete="new-password" />
        </Form.Item>
        <Form.Item
          name="nickname"
          label="昵称"
          rules={[{ required: true, message: '请输入昵称' }]}
        >
          <Input autoComplete="off" />
        </Form.Item>
        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            { required: false, message: '请输入邮箱' },
            { type: 'email', message: '请输入有效的邮箱地址' }
          ]}
        >
          <Input autoComplete="off" />
        </Form.Item>
        <Form.Item
          name="phone"
          label="电话"
          rules={[
            { required: false, message: '请输入电话号码' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
          ]}
        >
          <Input autoComplete="off" />
        </Form.Item>
        <Form.Item
          name="role"
          label="角色"
          rules={[{ required: true, message: '请选择角色' }]}
        >
          <Select
            placeholder="请选择角色"
            options={roles.map(role => ({
              label: `${role.name}`,
              value: role.code
            }))}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default UserModal;
